<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地存储</title>
    <style>
    table,tr,th{
        border:1px solid orange;
        padding:3px;
        text-align:center;
    }
    </style>
</head>
<body>
     <span>姓名：</span>
     <input type="text" id="u_name"/>
     </br>
     </br>
     <span>电话：</span>
     <input type="text" id="u_phone"/>
     </br>
     </br>
     <span>地址：</span>
     <input type="text" id="u_address"/>
     </br>
     </br>
     <button  id ="add_btn"onclick='addBtn()'>保存</button>
     </br>
     </br>
     <hr>
     </br>
     <table border>
     <thead>
             <tr>
                 <th>姓名</th>
                 <th>电话</th>
                 <th>地址</th>
                 <th>操作</th>
             </tr>
     </thead>
         <tbody id="tableBody">   
         </tbody>
     </table>
     <script>
     var dataArr = JSON.parse(localStorage.getItem('memo_11')) || [];
     var add_btn = document.getElementById('add_btn');
     var u_name,u_phone,u_address,tableBody,len,index;

     function addBtn(){
      u_name = getVal('u_name');
      u_phone = getVal('u_phone');
      u_address = getVal('u_address');

      data = {
        u_name: u_name,
        u_phone: u_phone,
        u_address: u_address
      }

      if(add_btn.innerHTML = '添加') {
       dataArr.push(data);
      }else{
        dataArr.splice(index,1,data);
      }


      dataArr.push(data);
      localStorage.setItem('memo_11',JSON.stringify(dataArr));
      getList();
      add_btn.innerHTML = '添加'
    }


    function getVal(id) {
         Val = document.getElementById(id).value;
        return Val;
    }

    function setVal(id,Val) {
        document.getElementById(id).value = Val;
    }
    
    

    function getList() {
        tableBody = document.getElementById('tableBody');
        var u_data = JSON.parse(localStorage.getItem('memo_11'));

        
        if(! u_data){
            return;
        }
        
        len = u_data.length;
        showData=[];

        for(var i = 0;i<len;i++){
        showData.push( '<tr>',
                            '<td>',u_data[i].u_name,'</td>',
                            '<td>',u_data[i].u_phone,'</td>',
                            '<td>',u_data[i].u_address,'</td>',
                            '<td><button index="',i,'" onclick="delbtn(this)">删除</button><button onclick="modbtn(this)">修改</button>','</td>',
                        '</tr>')
        }

        tableBody.innerHTML = showData.join('');
    }


        //删除按钮
          function delbtn(btn){
            if(confirm('是否确定删除?')) {
                var index = btn.getAttribute('index');
                dataArr.splice(index,1);
                localStorage.setItem('memo_11',JSON.stringify(dataArr));
                getList();
            }
        }
        //修改按钮
          function modbtn(btn){
            index = btn.getAttribute('index');
            setVal('u_name',dataArr[index].u_name);
            setVal('u_phone',dataArr[index].u_phone);
            setVal('u_address',dataArr[index].u_address);

            add_btn.innerHTML = '修改';

         }
        getList();

     </script>
    
</body>
</html>